<template>
    <Collapse v-model="openIndex" accordion @on-change="mainClass">
        <Panel v-for="(item, index) in treeList" :key="index" :name="(index + 1)+''">
          <span class="m-r-10"><img src="../../../static/svg/main-menu-icon.svg" /></span>{{item.catalogTypeName}}
          <p slot="content" >
            <Tree :data="item.treeData" @on-select-change="queryListByProIdClick" :render="renderContent" >
            </Tree>
          </p>
        </Panel>
    </Collapse>
</template>
<script>
import _ from 'lodash'
import getData from 'getData'
import util from 'util'

export default {
  props: {
    kpiTreeData: Array,
    catalogId: {
      type: String
    }
  },
  data () {
    return {
      treeList: [],
      mainClassValue: {},
      openIndex: '-1',
      node: {}
    }
  },
  watch: {
    kpiTreeData: {
      immediate: true,
      handler (val = []) {
        let vm = this
        const datas = []
        val.forEach(e => {
          let ret = vm.getTreeData(e)
          if (ret.expand) {
            let len = datas.length
            vm.node.catalogType = e.catalogType
            vm.node.catalogTypeName = e.catalogTypeName
            setTimeout(() => {
              vm.openIndex = (len + 1) + ''
              vm.$emit("queryListByProIdClick", vm.node)
            }, 300);
          }
          datas.push(ret)
        })
        vm.treeList = datas
      }
    },
  },
  methods: {
     renderContent (h, { root, node, data }) {
      return h('span', {
          style: {
              display: 'inline-block',
              width: '100%'
          }
      }, [
          h('span', [
              h('Icon', {
                  props: {
                      type: 'ios-folder',
                      color: '#ffbc00'
                  },
                  style: {
                      marginRight: '8px'
                  }
              }),
              h('span', {
                on: {
                    click: () => { this.queryListByProIdClick(node, data) },
                },
                 style: {
                  cursor: 'pointer'
                }
              }, data.title),
          ])
        ]);
      },
    queryListByProIdClick(e,value){
      var valueObj = util.util.cloneObj(value)
      valueObj.catalogType = this.mainClassValue.catalogType
      valueObj.catalogTypeName = this.mainClassValue.catalogTypeName
      this.$emit("queryListByProIdClick",valueObj)
    },
    mainClass(value){
      if(value.length > 0){
        this.mainClassValue.catalogType = this.treeList[parseInt(value) - 1].catalogType
        this.mainClassValue.catalogTypeName = this.treeList[parseInt(value) - 1].catalogTypeName
      }else{
        this.mainClassValue = {}
      }
    },
    getTreeData (e) {
      let ret = []
      let treeDate = []
      let sources = e.catalogDataVos || []
      if (sources.length) {
        treeDate = _.filter(sources, o => o.parentCatalogId === e.catalogType)
        ret = this.treeForming(treeDate, sources)
      }
      let ex = false
      for (let i = 0; i < ret.length; i++) {
        const r = ret[i];
        if (r.expand) {
          ex = true
          break
        }
      }
      e.treeData = ret
      e.expand = ex
      return e
    },
    treeForming (list = [], sources) {
      list.forEach(o => {
        o.title = o.catalogName
        o.children = _.filter(sources, c => c.parentCatalogId === o.catalogId) || []
        if (o.children.length) {
          o.children = this.treeForming(o.children, sources)
        }
        if (this.catalogId && o.catalogId === this.catalogId) {
          o.expand = true
          this.node = o
        }
      })
      return list
    },
  }
}
</script>
<style lang="less" scoped>
.ivu-collapse /deep/ {
    border:none;
    background:transparent;

  }
</style>


